<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-pager" target="_blank">npm 地址</a></ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="案例展示">
        <ph-divider>主题切换 theme：</ph-divider>
        <ph-button-group :container="true">
          <ph-button @click="onThemeShift('black')" type="dark"
            >black</ph-button
          >
          <ph-button @click="onThemeShift('dark')" type="dark">dark</ph-button>
          <ph-button @click="onThemeShift('light')">light</ph-button>
          <ph-button @click="onThemeShift('primary')" type="primary"
            >primary</ph-button
          >
          <ph-button @click="onThemeShift('success')" type="success"
            >success</ph-button
          >
          <ph-button @click="onThemeShift('danger')" type="danger"
            >danger</ph-button
          >
          <ph-button @click="onThemeShift('warning')" type="warning"
            >warning</ph-button
          >
          <ph-button @click="onThemeShift('transparent')" type="transparent"
            >transparent</ph-button
          >
        </ph-button-group>
        <ph-divider>默认:page="page" :total="total"</ph-divider>
        <ph-pager
          :theme="theme"
          :page="page"
          :total="total"
          @page="onPage"
        ></ph-pager>
        <ph-pretty>{{ demo1 }}</ph-pretty>
        <ph-divider>justify=[参考flex：content-justify选项]</ph-divider>
        <ph-pager
          :theme="theme"
          justify="flex-end"
          :page="page"
          :total="total"
          @page="onPage"
        ></ph-pager>
        <ph-pretty>{{ demo2 }}</ph-pretty>
        <ph-divider>simple</ph-divider>
        <ph-pager
          :theme="theme"
          :page="page"
          :total="total"
          @page="onPage"
          :simple="true"
        ></ph-pager>
        <ph-pretty>{{ demo3 }}</ph-pretty>
        <ph-divider>show-total</ph-divider>
        <ph-pager
          :theme="theme"
          :page="page"
          :total="total"
          @page="onPage"
          :show-total="true"
        ></ph-pager>
        <ph-pretty>{{ demo4 }}</ph-pretty>
        <ph-divider>show-pagesize :默认【10，20，30，50，100】</ph-divider>
        <ph-pager
          :theme="theme"
          :page="page"
          :total="total"
          @page="onPage"
          :show-total="true"
          :show-pagesize="true"
        ></ph-pager>
        <ph-pretty>{{ demo5 }}</ph-pretty>
        <ph-divider>pagesize-options= 【3，6，10】自定义</ph-divider>
        <ph-pager
          :theme="theme"
          :page="page"
          :total="total"
          @page="onPage"
          :show-total="true"
          :show-pagesize="true"
          :pagesize-options="[3, 6, 10]"
        ></ph-pager>
        <ph-pretty>{{ demo6 }}</ph-pretty>
        <ph-divider>接上：pagesize:6，指定默认页大小</ph-divider>
        <ph-pager
          :theme="theme"
          :page="page"
          :total="total"
          @page="onPage"
          :show-total="true"
          :show-pagesize="true"
          :pagesize-options="[3, 6, 10]"
          :pagesize="pagesize"
        ></ph-pager>
        <ph-pretty>{{ demo7 }}</ph-pretty>
        <ph-divider>show-jump:输入跳转页</ph-divider>
        <ph-pager
          :theme="theme"
          :page="page"
          :total="total"
          @page="onPage"
          :show-total="true"
          :show-pagesize="true"
          :pagesize-options="[3, 6, 10]"
          :pagesize="pagesize"
          :show-jump="true"
        ></ph-pager>
        <ph-pretty>{{ demo8 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import {
  PhView,
  PhBlockquote,
  PhPager,
  PhDivider,
  PhTab,
  PhTabPanel,
  PhButtonGroup,
  PhButton,
} from "@/index";
import * as Data from "../data/pager";
export default defineComponent({
  components: {
    PhView,
    PhBlockquote,
    PhPager,
    PhDivider,
    PhTab,
    PhTabPanel,
    PhButtonGroup,
    PhButton,
  },
  setup() {
    const testData = reactive({
      page: 1,
      total: 102,
      pagesize: 6,
    });
    const theme = ref("dark");
    const onThemeShift = (t: string) => {
      theme.value = t;
    };
    return {
      theme,
      onThemeShift,
      ...toRefs(testData),
      ...Data,
    };
  },
  methods: {
    onPage(data: { page: number }) {
      console.log(data);
      this.page = data.page;
    },
  },
});
</script>
